<template>
  <div class="theme_colors" :class="box_width===0?'':'bg'">
    <div class="setting_box">
      <div class="setting" @click="openSetting">
        <span class="iconfont" :class="box_width===0?'icon-icon-shezhi':'icon-close-bold'"></span>
      </div>
      <div class="list_box" :style="{width: box_width+'px'}">
        <div class="border_list_box">
          <p>整体风格设置</p>
          <ul>
            <li v-for="(item,index) in theme_colors" :key="index" :style="{background: item.colorBg}" @click="checkThemeColor(item.isDark)">
              <div class="btn" :style="{background: item.colorRight}">
                <span v-show="item.isDark===isDark" class="iconfont icon-icon-chenggong2" :style="{color: item.colorActive}"></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "theme_colors",  // 主题颜色
    props: {
      isDark: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        box_width: 0,
        theme_colors: [
          { colorBg: '#fff', colorRight: '#f0f2f5', colorActive: '#333', isDark: false },
          { colorBg: '#242525', colorRight: '#444', colorActive: '#ddd', isDark: true }
        ]
      }
    },
    created() {
      this.getLocalSetting();
    },
    methods: {
      getLocalSetting() {
        let isDark = JSON.parse(localStorage.getItem('themeColor'));
        if(isDark===true || isDark===false) {
          this.checkThemeColor(isDark)
        }
      },
      // 打开侧边框
      openSetting() {
        if(this.box_width===0) {
          this.box_width = 300;
        }else{
          this.box_width = 0;
        }
      },
      // 切换主题色
      checkThemeColor(isDark) {
        this.$emit('changeThemeColor', isDark)
      }
    }
  }
</script>

<style scoped lang="scss">
  .theme_colors.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
  }
  .theme_colors{
    .setting_box{
      position: fixed;
      top: 0;
      right: 8px;
      height: 100vh;
      z-index: 60;
      .setting{
        position: absolute;
        top: 60%;
        left: -45px;
        width: 45px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        cursor: pointer;
        span{
          color: #fff;
          font-size: 22px;
        }
      }
      .list_box{
        height: 100%;
        transition: all 0.4s;
        overflow: hidden;
        .border_list_box{
          width: 300px;
          p{
            padding: 20px 12px 10px;
          }
          ul{
            display: flex;
            li{
              width: 40px;
              height: 40px;
              margin: 8px;
              border-radius: 3px;
              position: relative;
              .btn{
                width: 24px;
                height: 24px;
                position: absolute;
                right: 0;
                bottom: 0;
                text-align: center;
                line-height: 24px;
              }
            }
          }
        }
      }
    }
  }
</style>
